<template>
    <div class="main-container">
      <!-- 联系人列表 -->
      <div class="contact-list">
        <div class="list-container">
          <div
            v-for="(contact, index) in contacts"
            :key="index"
            class="contact-item"
            :class="{ active: activeContactIndex === index }"
            @click="setActiveContact(index)"
          >
            <div class="avatar">
              <img :src="contact.avatar" alt="头像" />
            </div>
            <div class="contact-info">
              <div class="username">{{ contact.name }}</div>
              <div class="last-message">{{ contact.lastMessage }}</div>
            </div>
            <div class="last-time">{{ contact.lastTime }}</div>
          </div>
        </div>
      </div>
      <!-- 聊天区域 -->
      <div class="chat-area">
        <div class="chat-header">
          <h2>{{ activeContact ? activeContact.name : "暂无聊天对象" }}</h2>
        </div>
        <div class="chat-messages">
          <div
            v-for="(message, index) in activeContactMessages"
            :key="index"
            class="chat-message"
            :class="{ 'self-message': message.isSelf }"
          >
            <div class="message-avatar">
              <img
                :src="message.isSelf ? selfAvatar : activeContact.avatar"
                alt="头像"
              />
            </div>
            <div class="message-content">
              <p>{{ message.content }}</p>
            </div>
          </div>
        </div>
        <div class="chat-input">
          <input
            v-model="newMessage"
            type="text"
            placeholder="输入消息..."
            @keyup.enter="sendMessage"
          />
          <button @click="sendMessage">发送</button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from "vue";
  
  // 模拟联系人数据
  const contacts = ref([
    {
      name: "张三",
      avatar: "https://dummyimage.com/40x40/000/fff",
      lastMessage: "最近怎么样？",
      lastTime: "10:30 AM",
      messages: [
        { content: "你好呀", isSelf: false },
        { content: "我挺好的，你呢？", isSelf: true },
      ],
    },
    {
      name: "李四",
      avatar: "https://dummyimage.com/40x40/000/fff",
      lastMessage: "在吗？",
      lastTime: "11:15 AM",
      messages: [{ content: "在呢，有什么事？", isSelf: true }],
    },
  ]);
  
  // 模拟自己的头像
  const selfAvatar = "https://dummyimage.com/40x40/000/fff";
  
  // 当前激活的联系人索引
  const activeContactIndex = ref(-1);
  
  // 当前激活的联系人
  const activeContact = computed(() =>
    activeContactIndex.value !== -1
      ? contacts.value[activeContactIndex.value]
      : null
  );
  
  // 当前激活联系人的消息列表
  const activeContactMessages = computed(() =>
    activeContact.value ? activeContact.value.messages : []
  );
  
  // 新消息输入框内容
  const newMessage = ref("");
  
  // 设置激活的联系人
  const setActiveContact = (index) => {
    activeContactIndex.value = index;
  };
  
  // 发送消息
  const sendMessage = () => {
    if (newMessage.value.trim() !== "" && activeContact.value) {
      activeContact.value.messages.push({
        content: newMessage.value,
        isSelf: true,
      });
      newMessage.value = "";
    }
  };
  </script>
  
  <style scoped lang="scss">
  @import "../assets/user.scss";
  </style>
  